<template>
	<view class="page" @touchmove="touchend($event)">
		<view class="logo_box">
			<image class="logo" src="/static/icon/logo.png" mode="scaleToFill" />
		</view>
		<view class="form">
			<view class="phone_warp">
				<image class="ShouJi" src="/static/icon/ShouJi.png" mode="scaleToFill" />
				<input type="number" maxlength="11" v-model="value" class="input" placeholder-class="placeholder" placeholder="请输入手机号" />
			</view>
			<view class="phone_warp">
				<image class="MiMa" src="/static/icon/MiMa.png" mode="scaleToFill" />
				<input type="number" maxlength="4" v-model="code" class="input" placeholder-class="placeholder" placeholder="请输入短信验证码" />
				<text class="code headle" v-if="show" :class="{ code_false: !isIed }" @click="getCode">获取验证码</text>
				<text class="code" v-else :class="{ code_false: !isIed }">{{ count }}s后获取验证码</text>
			</view>
		</view>
		<view class="btn" @click="login">立即登录</view>
		<view class="logo_b animation" :class="'animation-' + animation">
			<u-checkbox shape="circle" size="30" v-model="checkbox" labelSize="24rpx">阅读并同意</u-checkbox>
			<text @click="openWebView('serve')">《服务协议》</text>
			<text @click="openWebView('privacy')">《隐私政策》</text>
		</view>
		<view class="describe">
			<text>如遇问题可</text>
			<text @click="service">联系客服</text>
			<!-- <image class="arr_r" src="/static/icon/arr_r.png" mode="scaleToFill" /> -->
			<u-icon class="icon" name="arrow-right-double" color="#2979ff" size="20"></u-icon>
		</view>
		<view class="put">ICP备案2020033414号</view>
	</view>
</template>

<script>
import ajax from '@/api'
import { setTabBar } from '@/utils'
export default {
	components: {},
	data() {
		return {
			checkbox: false,
			value: '',
			code: '',
			count: '',
			animation: '',
			show: true,
			timer: null
		}
	},
	computed: {
		isIed() {
			return this.value.length == 11
		}
	},
	watch: {},
	onLoad() {},
	onShow() {},
	onReady() {},
	methods: {
		async login() {
			if (!this.checkbox) {
				uni.vibrateLong({
					success: () => {
						uni.showToast({
							title: '请阅读并同意用户协议',
							icon: 'none'
						})
					}
				})
				this.animation = 'shake'
				setTimeout(() => {
					this.animation = ''
				}, 800)
				return
			}
			if (this.value == '' && this.code == '') {
				uni.vibrateLong({
					success: () => {
						uni.showToast({
							title: '请输入手机号或验证码',
							icon: 'none'
						})
					}
				})
				return
			}
			if (!this.$u.test.mobile(this.value)) {
				uni.vibrateLong({
					success: () => {
						uni.showToast({
							title: '请输入合法手机号',
							icon: 'none'
						})
					}
				})
				return
			}
			try {
				uni.showLoading({
					title: '拼命加载中...',
					mask: true
				})
				const result = await ajax.login({ phone: this.value, code: this.code, app_get_channel: 1 })
				uni.setStorageSync('token', result.token)
				setTabBar()
				setTimeout(() => {
					uni.hideLoading()
					uni.switchTab({
						url: '/pages/home/index'
					})
				}, 800)
			} catch (error) {
				uni.hideLoading()
			}
		},
		async getCode() {
			if (!this.isIed) return
			if (!this.$u.test.mobile(this.value)) {
				uni.vibrateLong({
					success: () => {
						uni.showToast({
							title: '请输入合法手机号',
							icon: 'none'
						})
					}
				})
				return
			}
			const data = await ajax.getCode({ phone: this.value })
			const TIME_COUNT = data.sms_time
			if (!this.timer) {
				this.count = TIME_COUNT
				this.show = false
				this.timer = setInterval(() => {
					if (this.count > 0 && this.count <= TIME_COUNT) {
						this.count--
					} else {
						this.show = true
						clearInterval(this.timer)
						this.timer = null
					}
				}, 1000)
			}
		},
		touchend() {
			uni.hideKeyboard()
		},
		service() {
			uni.navigateTo({
				url: '/pages/my/service'
			})
		},
		openWebView(type) {
			const name = type == 'serve' ? '用户使用协议' : '用户隐私协议'
			const url = type == 'serve' ? 'https://website.zd-dqd.com/dqdxy/#/pages/agreement/index' : 'https://website.zd-dqd.com/dqdxy/#/pages/agreement/privacy'
			uni.navigateTo({
				url: `/pages/webView/index?name=${name}&url=${url}`
			})
		}
	},
	onHide() {},
	onUnload() {}
}
</script>
<style lang="scss">
.icon {
	margin-top: 6rpx;
}
.code_false {
	color: rgba(52, 120, 242, 0.3) !important;
}
.code {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #3478f2;
	position: relative;
}
.code::after {
	position: absolute;
	content: '';
	width: 2rpx;
	height: 28rpx;
	background: #dddcde;
	left: -12rpx;
	top: 6rpx;
}
.input {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
	margin-top: 4rpx;
	flex: 1;
}
.btn {
	width: 654rpx;
	height: 88rpx;
	line-height: 88rpx;
	background: #3478f2;
	border-radius: 52rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 80rpx;
}
.page {
	padding: 48rpx;
	background: #fff;
}
.describe {
	margin-top: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
	}
}
.describe text:nth-of-type(2) {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #3478f2;
	margin-left: 12rpx;
	position: relative;
	margin-right: 10rpx;
	// border-bottom: 1px solid #3478f2;
}
.describe text:nth-of-type(2)::after {
	position: absolute;
	content: '';
	width: 164rpx;
	height: 2rpx;
	background: #3478f2;
	left: 0;
	bottom: 0;
}
.logo_box {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 300rpx;
	.logo {
		width: 144rpx;
		height: 208rpx;
	}
}
.form {
	margin-top: 56rpx;
	.phone_warp {
		display: flex;
		border-bottom: 1px solid #eee;
		padding: 32rpx;
	}
	.ShouJi {
		width: 34rpx;
		height: 46rpx;
		margin-right: 26rpx;
	}
	.MiMa {
		width: 36rpx;
		height: 42rpx;
		margin-right: 26rpx;
	}
}
.logo_b {
	margin-top: 26rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3478f2;
	}
}
.put {
	margin-top: 386rpx;
	display: flex;
	justify-content: center;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #bdbdbd;
}
.arr_r {
	width: 28rpx;
	height: 22rpx;
	margin-left: 6rpx;
}
.placeholder {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 40rpx;
	color: #ced0d6;
}
.animation-shake {
	animation: shake 0.3s !important;
}
@keyframes shake {
	0%,
	100% {
		transform: translateX(0);
	}

	10% {
		transform: translateX(-9px);
	}

	20% {
		transform: translateX(8px);
	}

	30% {
		transform: translateX(-7px);
	}

	40% {
		transform: translateX(6px);
	}

	50% {
		transform: translateX(-5px);
	}

	60% {
		transform: translateX(4px);
	}

	70% {
		transform: translateX(-3px);
	}

	80% {
		transform: translateX(2px);
	}

	90% {
		transform: translateX(-1px);
	}
}
</style>
